﻿@model Sheng.WeixinConstruction.Management.Shell.Models.MemberQRCodeDetailViewModel

@{
    ViewBag.MainMenu = "Campaign";
    ViewBag.LeftMenu = "MemberQRCode";

    ViewBag.Title = "粉丝海报";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script type="text/javascript" src="/Scripts/laydate/laydate.js"></script>
<script type="text/javascript" src="/Scripts/echarts.min.js"></script>

<script>

    var _id = getQueryString("id");

    $(document).ready(function ()
    {
        if (_online == false)
            return;

        loadDataAnalyse();
    });

    function changePage(url)
    {
        window.location.href = url + "?id=" + _id;
    }

    function removeData()
    {
        if (_id == undefined || _id == "")
        {
            return;
        }

        var msg = "是否确认删除该活动？"

        var confirmLayerIndex = layer.confirm(msg, {
            btn: ['确认', '取消'], //按钮
            shade: [0.4, '#393D49'],
            title: false,
            closeBtn: false,
            shift: _layerShift
        }, function ()
        {
            layer.close(confirmLayerIndex);

            var loadLayerIndex = layer.load(0, {
                shade: [0.2, '#fff']
            });

            $.ajax({
                url: "/Api/Campaign/RemoveMemberQRCode?id=" + _id,
                type: "POST",
                dataType: "json",
                success: function (data, status, jqXHR)
                {
                    layer.close(loadLayerIndex);
                    if (data.Success)
                    {
                        window.location.href = "/Campaign/MemberQRCode_Ongoing";
                    } else
                    {
                        layerAlert(data.Message);
                    }
                },
                error: function (xmlHttpRequest)
                {
                    layer.close(loadLayerIndex);
                    alert("Error: " + xmlHttpRequest.status);
                }
            });
        });
    }

    function endCampaign()
    {
        if (_id == undefined || _id == "")
        {
            return;
        }

        var msg = "是否确认结束该活动？"

        var confirmLayerIndex = layer.confirm(msg, {
            btn: ['确认', '取消'], //按钮
            shade: [0.4, '#393D49'],
            title: false,
            closeBtn: false,
            shift: _layerShift
        }, function ()
        {
            layer.close(confirmLayerIndex);

            var loadLayerIndex = layer.load(0, {
                shade: [0.2, '#fff']
            });

            $.ajax({
                url: "/Api/Campaign/EndCampaign?id=" + _id,
                type: "POST",
                dataType: "json",
                success: function (data, status, jqXHR)
                {
                    if (data.Success)
                    {
                        if (data.Data == 0)
                        {
                            window.location.reload();
                        }
                        else
                        {
                            layer.close(loadLayerIndex);
                            switch (data.Data)
                            {
                                case 1:
                                    layerAlert("此活动已经是结束过的活动。");
                                case 2:
                                    layerAlert("此活动还没有开始。");
                                default:
                                    layerAlert("开始失败");
                            }
                        }

                    } else
                    {
                        layer.close(loadLayerIndex);
                        layerAlert(data.Message);
                    }
                },
                error: function (xmlHttpRequest)
                {
                    layer.close(loadLayerIndex);
                    alert("Error: " + xmlHttpRequest.status);
                }
            });
        });
    }

    function loadDataAnalyse()
    {
        @if (Model.CampaignBundle.Campaign.StartTime.HasValue == false)
        {
            <text>
        layerAlert("活动尚未开始。");
        return;
        </text>
        }

        if ($("#txtStartDate").val() == "")
        {
            $("#txtStartDate").val('@Model.CampaignBundle.Campaign.StartTime.Value.AddDays(-1).ToString("yyyy-MM-dd")');
        }

        if ($("#txtEndDate").val() == "")
        {
            @if (Model.CampaignBundle.Campaign.EndTime.HasValue)
            {
                @:$("#txtEndDate").val('@Model.CampaignBundle.Campaign.EndTime.Value.ToString("yyyy-MM-dd")');
                        }
            else
            {
                @:$("#txtEndDate").val((new Date()).format("yyyy-MM-dd"));
                        }
        }

        var loadLayerIndex = layer.load(0, {
            shade: [0.2, '#fff']
        });

        var args = new Object();
        args.CampaignId = _id;
        args.StartDate = $("#txtStartDate").val();
        args.EndDate = $("#txtEndDate").val();

        $.ajax({
            url: "/Api/Campaign/GetMemberQRCodeDataAnalyse",
            type: "POST",
            dataType: "json",
            data: JSON.stringify(args),
            success: function (data, status, jqXHR)
            {
                //   alert(JSON.stringify(data));

                layer.close(loadLayerIndex);
                if (data.Success)
                {
                    showDayChart(data.Data);
                    showLandingChart(data.Data);
                } else
                {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest)
            {
                layer.close(loadLayerIndex);
                alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function showDayChart(data)
    {
        var categoryArray = new Array();
        $.each(data.DayCreate, function (idx, obj)
        {
            categoryArray[idx] = obj.Date;
        });

        var dayCreateArray = new Array();
        $.each(data.DayCreate, function (idx, obj)
        {
            dayCreateArray[idx] = obj.TotalCount;
        });

        var dayLandingArray = new Array();
        $.each(data.DayLanding, function (idx, obj)
        {
            dayLandingArray[idx] = obj.TotalCount;
        });

        var dayLandingPersonArray = new Array();
        $.each(data.DayLandingPerson, function (idx, obj)
        {
            dayLandingPersonArray[idx] = obj.TotalCount;
        });

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('dayChart'));

        // 指定图表的配置项和数据
        option = {
            title: {
                text: '日生成量与落地量',
                subtext: '指定时间段内每日生成二维码的数量与落地到指定页面的数量'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['生成量', '落地次数', '落地人数']
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {},
                    dataView: { readOnly: false },
                    magicType: { type: ['line', 'bar'] },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: categoryArray
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}'
                    }
                }
            ],
            series: [
                {
                    name: '生成量',
                    type: 'line',
                    data: dayCreateArray

                },
                {
                    name: '落地次数',
                    type: 'line',
                    data: dayLandingArray

                },
                {
                    name: '落地人数',
                    type: 'line',
                    data: dayLandingPersonArray

                }
            ]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    function showLandingChart(data)
    {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('landingChart'));

        // 指定图表的配置项和数据
        option = {
            title: {
                text: '落地总量',
                subtext: '落地总次数及总人数'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['落地总次数', '落地总人数']
            },
            xAxis: [
                {
                    type: 'value'
                }
            ],
            yAxis: [
                {
                    type: 'category',
                    axisTick: { show: false },
                    data: ['']
                }
            ],
            series: [
                {
                    name: '落地总次数',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            label: { show: true }
                        }
                    },
                    data: [data.LandingCount]
                },
                {
                    name: '落地总人数',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            label: { show: true }
                        }
                    },
                    data: [data.LandingPersonCount]
                }

            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

</script>

<div style="margin-top: 25px; margin-left: 10px;" class="font_black_24">
    @Model.CampaignBundle.Campaign.Name
</div>

<div style="margin-top: 30px;">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td class="td_ContentTab_active" style="width: 150px;">摘要</td>
            <td class="td_ContentTab" style="width: 150px;">
                <a href="javascript:void(0)" class="a_black_16" onclick="changePage('/Campaign/MemberQRCodeItemList')">生成记录</a>
            </td>
            <td align="right">
                &nbsp;
            </td>
        </tr>
        <tr>
            <td colspan="4" bgcolor="#EEEEEE" height="2"></td>
        </tr>
    </table>
</div>

<div style="margin-left: 20px; margin-right: 20px; margin-top: 10px;">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td valign="top">
                <table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top: 20px;">
                    <tr>
                        <td width="50%" height="36" valign="top">创建时间：@Model.CampaignBundle.Campaign.CreateTime</td>
                        <td width="50%" valign="top">&nbsp;</td>
                    </tr>
                    <tr>
                        <td width="50%" height="36" valign="top">开始时间：@Model.CampaignBundle.Campaign.StartTime</td>
                        <td width="50%" valign="top">
                            @if (Model.CampaignBundle.Campaign.Status == Sheng.WeixinConstruction.Infrastructure.EnumCampaignStatus.End)
                            {
                                @:结束时间：@Model.CampaignBundle.Campaign.EndTime
                            }
                        </td>
                    </tr>
                    <tr>
                        <td height="36" valign="top">创建者：@Model.CampaignBundle.Campaign.CreateUserName</td>
                        <td valign="top">
                            仅关注者可参与：
                            @if (Model.CampaignBundle.Campaign.OnlyMember)
                            {
                                @:是
                            }
                            else
                            {
                                @:否
                            }
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" valign="top">备注：@Model.CampaignBundle.Campaign.Remark</td>
                    </tr>
                </table>

            </td>
            <td width="280" align="right" valign="top">
                <img src="@Model.CampaignBundle.Campaign.ImageUrl" sty style="max-width:240px;">
            </td>
        </tr>
    </table>
</div>

<div class="divDotLine" style="margin-top: 20px; margin-left: 20px; margin-right: 20px;"></div>

<div style="margin-top:10px;">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td>
                <div style="padding:0px;">
                    <table width="100%" border="0" cellspacing="0" cellpadding="8">
                        <tr>
                            <td width="60">开始：</td>
                            <td width="150">
                                <input id="txtStartDate" class="input_16" onclick="laydate({format: 'YYYY-MM-DD'})">
                            </td>
                            <td width="60">结束：</td>
                            <td width="150">
                                <input id="txtEndDate" class="input_16" onclick="laydate({format: 'YYYY-MM-DD'})">
                            </td>
                            <td>
                                <span style=" margin-top:20px;">
                                    <input name="btnSearch" type="button" class="btn_blue" id="btnSearch" value="查询" onclick="loadDataAnalyse()" />
                                </span>
                            </td>
                            <td width="100" align="right">
                                &nbsp;
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>

    </table>

</div>

<div id="dayChart" style="width: 100%; height: 400px; margin-top:20px;"></div>

<div class="divDotLine" style="margin-top: 20px; margin-left: 20px; margin-right: 20px;"></div>

<div id="landingChart" style="width: 100%; height: 300px; margin-top:20px;"></div>

<div class="divDotLine" style="margin-top: 20px; margin-left: 20px; margin-right: 20px;"></div>

<div style="margin-top: 25px;">
    <div style="float: right;">
        <input name="btnRemove" type="button" class="btn_red" id="btnRemove" value="删 除" onclick="removeData()" />
    </div>
    <div style="float: left">
        @if (Model.CampaignBundle.Campaign.Status == Sheng.WeixinConstruction.Infrastructure.EnumCampaignStatus.Ongoing)
        {
            <input name="btnModify" type="button" class="btn_blue" id="btnModify" value="编 辑" onclick="changePage('/Campaign/MemberQRCodeEidt')" />
            <input name="btnEnd" type="button" class="btn_red" id="btnEnd" value="结 束" onclick="endCampaign()" />
        }
    </div>
    <div style="clear: both"></div>
</div>


